<template>
  <view class="news-detail">
    <!-- 新闻标题 -->
    <view class="title">{{newsDetail.title}}</view>
    
    <!-- 新闻信息 -->
    <view class="info">
      <uni-dateformat :date="Number(newsDetail.createTime)" format="yyyy-MM-dd hh:mm:ss" :threshold="[0,3600*24*30]"></uni-dateformat>
      <text class="views">浏览 {{newsDetail.views}}</text>
    </view>
    
    <!-- 新闻封面图 -->
    <image 
      class="cover-image" 
      :src="newsDetail.image" 
      mode="widthFix"
      @error="handleImageError"
    ></image>
    
    <!-- 新闻内容 -->
    <view class="content">{{newsDetail.content}}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsDetail: {
        title: '',
        image: '',
        content: '',
        createTime: '',
        views: 0
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.getNewsDetail(options.id)
    }
  },
  methods: {
    // 获取新闻详情
    async getNewsDetail(id) {
      try {
        const res = await uniCloud.importObject('fetch_data').getNewsDetail(id)
        if (res.errCode === 0) {
          this.newsDetail = res.data
        } else {
          throw new Error(res.errMsg)
        }
      } catch (error) {
        console.error('获取新闻详情失败：', error)
        uni.showToast({
          title: '获取新闻失败',
          icon: 'none'
        })
      }
    },
    
    // 图片加载失败处理
    handleImageError() {
      this.newsDetail.image = '/static/images/default-news.png'
    }
  }
}
</script>

<style lang="scss">
.news-detail {
  padding: 20rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 30rpx;
    
    .views {
      color: #999;
    }
  }
  
  .cover-image {
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 12rpx;
  }
  
  .content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
  }
}
</style> 